<template>
    <div class='flex p-l-r'>
        <section :class='$style.aside'>
            <a-tree @select='selectFactor' :fieldNames='{children : "children", title : "label", key : "key"}' :tree-data='factorRows'></a-tree>
        </section>
        <section class='flex-1 m-l-30'>
            <div :class='$style.chart'>
                <template v-if='loading'>
                    <a-skeleton active />
                </template>
                <template v-else>
                    <template v-if='chartDatas.length > 0'>
                        <template v-for='(chartData, index) in chartDatas'>
                            <Chart :class='{"m-t-20" : index != 0}' :chartData='chartData' />
                        </template>
                    </template>
                    <template v-else>
                        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE">
                            <template #description>
                                <template v-if='!selectedId'>请从左侧选择指标</template>
                                <template v-else>无数据</template>
                            </template>
                        </a-empty>
                    </template>
                </template>
            </div>
        </section>
    </div>
</template>

<script lang='ts' setup>
    import { computed, reactive, ref } from "vue";
    import { macroApi, macroTestApi } from '@/api/macro'
    import { message } from "ant-design-vue";
    import { Empty } from 'ant-design-vue';
    import Chart from './Chart.vue'

    const loading = ref(false)
    const factorRows = reactive([])
    const chartDatas = reactive<any[]>([])
    const selectedId = ref(0)



    async function selectFactor(values, {node}) {
        chartDatas.splice(0)
        loading.value = true
        selectedId.value = node.dataRef.id
        const res = await macroTestApi(selectedId.value)
        loading.value = false
        if(res.success) {
            if(res.data) {
                if(Array.isArray(res.data)) {
                    chartDatas.push(...res.data)
                }else {
                    chartDatas.push(res.data)
                }
            }
        }else {
            message.error(res.message)
        }
    }

    

    macroApi().then(rows => {
        factorRows.push(...rows)
    })
</script>


<style scoped module lang='scss'>
    .aside{
        background: #fff;
        max-width: 300px;
        //border: 1px solid $border-color;
        //padding: 10px 10px;
    }

    .chart{
        height: 600px;
    }
</style>